<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script type="text/javascript" src="/js/echarts.js"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <input type="hidden" id="mid" th:value="${#httpSession.getAttribute('mid')}">
                    <input type="hidden" th:value="${#httpSession.getAttribute('mname')}" id="mname">
                    <blockquote class="layui-elem-quote">欢迎管理员：
                        <span class="x-red" id="span"></span>！当前时间:<span id="time"></span>
                        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
                           onclick="location.reload()" title="刷新">
                            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
                    </blockquote>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">数据统计</div>
                <div class="layui-card-body ">
                    <ul class="layui-row layui-col-space10 layui-this x-admin-carousel x-admin-backlog tab-align-center">
                        <li class="layui-col-md3 layui-col-xs6">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>商品总数</h3>
                                <p>
                                    <cite id="cite1"></cite>
                                </p>
                            </a>
                        </li>
                        <li class="layui-col-md3 layui-col-xs6">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>订单数</h3>
                                <p>
                                    <cite>12</cite>
                                </p>
                            </a>
                        </li>
                        <li class="layui-col-md3 layui-col-xs6">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>评论数</h3>
                                <p>
                                    <cite>99</cite>
                                </p>
                            </a>
                        </li>
                        <li class="layui-col-md3 layui-col-xs6">
                            <a href="javascript:;" class="x-admin-backlog-body">
                                <h3>销售额</h3>
                                <p>
                                    <cite>67</cite>
                                </p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">商品信息</div>
                <div class="layui-card-body ">
                    <div id="main" style="height:600px;"></div>
                </div>
            </div>
        </div>

        <style id="welcome_style"></style>

    </div>
</div>
</div>
<script>
    var name = $("#mname").val()
    $("#span").text(name)
</script>
<script>
    function getTime() {
        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)
        var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        var myHour = myDate.getHours(); //获取当前小时数(0-23)
        var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
        var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
        var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var nowTime;

        nowTime = myYear + '年' + fillZero(myMonth) + '月' + fillZero(myToday) + '日' + '  ' + fillZero(myHour) + ':' +
            fillZero(myMinute) + ':' + fillZero(mySecond) + '  ' + week[myDay] + '  ';
        //console.log(nowTime);
        $('#time').html(nowTime);
    };

    function fillZero(str) {
        var realNum;
        if (str < 10) {
            realNum = '0' + str;
        } else {
            realNum = str;
        }
        return realNum;
    }

    setInterval(getTime, 1000);

</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var series = [];
    var series2 = [];
    // 指定图表的配置项和数据
    var option = {
        legend: {
            data: ['库存', '销量']
        },
        tooltip: {
            trigger: 'axis',
            formatter: '{a}:{c}',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                },
                label: {
                    show: true
                }
            }
        },
        grid: {
            show: false,
            top: '30',
            bottom: '60',
            right: '60',
            left: '60'
        },

        xAxis: [
            {
                type: 'category',
                data: [],
                axisPointer: {
                    type: 'shadow'
                },
                axisTick: {
                    show: true,
                    interval: 0
                },
            }
        ],
        //设置两个y轴，左边显示数量，右边显示概率

        yAxis: [
            {
                type: 'value',
                name: '总数',
                show: true,
                interval: 5,
                axisLabel: {
                    formatter: '{value} 份'
                }
            },

        ],

//每个设备分数量、概率2个指标，只要让他们的name一致，即可通过，legeng进行统一的切换

        series: [
        {
            name: '库存',
            type: 'bar',
            data: [],
            barWidth: '50%',

        },
        {
            name: '销量',
            type: 'line',
            yAxisIndex: 0,    //这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
            data: [],
            label: {
                show: true,
                position: 'bottom',
                textStyle: {
                    color: 'black',
                    fontSize: 16
                }
            },
            itemStyle: {
                normal: {
                    color: "#1FC3CE"
                }

            }
        }]
    };
    myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
    var mid = $("#mid").val();
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    var names = [];    //类别数组（实际用来盛放X轴坐标值）
    $.ajax({
        type: 'get',
        url: '/product/findAllProductByMid?mid=' + mid,//请求数据的地址
        dataType: "json",        //返回数据形式为json
        success: function (result) {
            let productSum = result.data.records.length
            $("#cite1").text(productSum)
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            $.each(result.data.records, function (index, item) {
                names.push(item.name);    //挨个取出类别并填入类别数组
                series.push(item.stock);
            });
            $.each(result.data.records, function (index, item) {
                series2.push(item.sold);
            });
            myChart.hideLoading();    //隐藏加载动画
            myChart.setOption({        //加载数据图表
                xAxis: {
                    data: names
                },
                yAxis: {
                    data: series2
                },
                series: [{
                    data: series
                },
                    {
                        data: series2
                    }]
            });
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
</script>
</body>
</html>